<template>
  <base-breadcrumb
    v-loading="loading"
    :breadcrumb="!isAudit"
  >
    <div
      v-if="state === 3"
      class="details"
    >
      <div class="box">
        <TitleName title="项目信息" />
        <div class="content">
          <a-descriptions
            :column="{ md: 2, sm: 2 }"
            style="padding: 0 20px"
          >
            <a-descriptions-item label="分公司名称">
              <span>{{ detailsData.branchCompany }}</span>
            </a-descriptions-item>
            <a-descriptions-item label="项目名称">
              <span>{{ detailsData.projectName }}</span>
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
      <div class="box">
        <TitleName title="分包招议标计划详情" />
        <div class="content">
          <a-descriptions
            :column="{ md: 2, sm: 2 }"
            style="padding: 0 20px"
          >
            <a-descriptions-item label="分包商选择方式">
              <span>{{ detailsData.subcontractorsSelect }}</span>
            </a-descriptions-item>
            <a-descriptions-item label="招标合同额（万元）">
              <span>{{ detailsData.tenderContractMoney }}</span>
            </a-descriptions-item>
          </a-descriptions>
          <a-descriptions
            :column="{ md: 2, sm: 2 }"
            style="padding: 0 20px"
          >
            <a-descriptions-item label="计划招议标时间">
              <span>{{ detailsData.planBiddingTime }}</span>
            </a-descriptions-item>
            <a-descriptions-item label="分包方式">
              <span>{{ detailsData.branchPackMode }}</span>
            </a-descriptions-item>
          </a-descriptions>
          <a-descriptions
            :column="{ md: 2, sm: 2 }"
            style="padding: 0 20px"
          >
            <a-descriptions-item label="计划开工时间">
              <span>{{ detailsData.planTime }}</span>
            </a-descriptions-item>
            <a-descriptions-item label="计划合同签订时间">
              <span>{{ detailsData.planContractTime }}</span>
            </a-descriptions-item>
          </a-descriptions>
          <a-descriptions
            :column="{ md: 2, sm: 2 }"
            style="padding: 0 20px"
          >
            <a-descriptions-item label="拟定队伍数量">
              <span>{{ detailsData.ranksNum }}</span>
            </a-descriptions-item>
            <a-descriptions-item label="计划完工时间">
              <span>{{ detailsData.planEndTime }}</span>
            </a-descriptions-item>
          </a-descriptions>
          <a-descriptions
            :column="{ md: 2, sm: 2 }"
            style="padding: 0 20px"
          >
            <a-descriptions-item label="招标内容">
              <span>{{ detailsData.biddingContent }}</span>
            </a-descriptions-item>
          </a-descriptions>
          <a-descriptions
            :column="{ md: 2, sm: 2 }"
            style="padding: 0 20px"
          >
            <a-descriptions-item label="情况说明">
              <span>{{ detailsData.information }}</span>
            </a-descriptions-item>
          </a-descriptions>
          <a-descriptions
            :column="{ md: 2, sm: 2 }"
            style="padding: 0 20px"
          >
            <a-descriptions-item label="附件">
              <b-upload
                :maxUploadCount="1"
                upload-type="single"
                business-code="LCM16"
                disabled
                :multiple="false"
                :file-list.sync="planFileInfoVo"
              />
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
      <div
        class="operation"
        style="text-align: right"
      >
        <a-button
          v-checkVisibleInDetail
          @click="$close()"
        >
          关闭
        </a-button>
      </div>
    </div>
    <div
      v-else
      class="operations"
    >
      <a-form-model
        ref="form"
        :model="queryParam"
        :rules="rules"
        :label-col="{ lg: { span: 6 }, sm: { span: 16 } }"
        :wrapper-col="{ lg: { span: 6 }, sm: { span: 16 } }"
      >
        <div class="box">
          <TitleName title="项目信息" />
          <div class="content">
            <a-row :gutter="24">
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-model-item
                  label="分公司名称"
                  prop="branchCompanyId"
                >
                  <SelectSubCompany
                    v-model="queryParam.branchCompanyId"
                    placeholder="请选择"
                  />
                </a-form-model-item>
              </a-col>
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-model-item
                  label="项目名称"
                  prop="projectId"
                >
                  <SelectProject
                    v-model="queryParam.projectId"
                    placeholder="请选择"
                    :form="queryParam"
                    :is-clear="false"
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
          </div>
        </div>
        <div class="box">
          <TitleName title="分包招议标计划详情" />
          <div class="content">
            <a-row :gutter="24">
              <a-col
                v-if="this.$route.query.id"
                :md="8"
                :sm="8"
              >
                <a-form-model-item label="状态">
                  <BaseInput
                    v-model="detailsData.biddingStatusName"
                    disabled
                  />
                </a-form-model-item>
              </a-col>
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-model-item
                  label="招标合同额(万元)"
                  prop="amount"
                >
                  <BaseInputNumber
                    v-model="queryParam.amount"
                    :precision="6"
                    placeholder="请输入招标合同额（万元）"
                  />
                </a-form-model-item>
              </a-col>
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-model-item
                  label="分包商选择方式"
                  prop="subcontractorsSelectId"
                >
                  <a-select
                    v-model="queryParam.subcontractorsSelectId"
                    placeholder="请选择"
                  >
                    <a-select-option
                      v-for="(item, index) in subcontractorSelectionMethods"
                      :key="index"
                      :value="item.id"
                    >
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-model-item
                  label="分包方式"
                  prop="branchPackModeId"
                >
                  <a-select
                    v-model="queryParam.branchPackModeId"
                    placeholder="请选择"
                  >
                    <a-select-option
                      v-for="item in subcontractMethods"
                      :key="item.id"
                      :value="item.id"
                    >
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-model-item
                  label="计划招议标时间"
                  prop="planBiddingTime"
                >
                  <a-date-picker
                    v-model="queryParam.planBiddingTime"
                    type="date"
                    @change="(stamp, time) => getDeclareDate(stamp, time, '计划招议标时间')"
                  />
                </a-form-model-item>
              </a-col>
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-model-item
                  label="计划合同签订时间"
                  prop="planContractTime"
                >
                  <a-date-picker
                    v-model="queryParam.planContractTime"
                    type="date"
                    @change="(stamp, time) => getDeclareDate(stamp, time, '计划合同签订时间')"
                  />
                </a-form-model-item>
              </a-col>
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-model-item
                  label="计划开工时间"
                  prop="planTime"
                >
                  <a-date-picker
                    v-model="queryParam.planTime"
                    type="date"
                    @change="(stamp, time) => getDeclareDate(stamp, time, '计划开工时间')"
                  />
                </a-form-model-item>
              </a-col>
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-model-item
                  label="计划完工时间"
                  prop="planEndTime"
                >
                  <a-date-picker
                    v-model="queryParam.planEndTime"
                    type="date"
                    @change="(stamp, time) => getDeclareDate(stamp, time, '计划完工时间')"
                  />
                </a-form-model-item>
              </a-col>
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-model-item
                  label="拟定队伍数量"
                  prop="ranksNum"
                >
                  <BaseInputNumber
                    v-model="queryParam.ranksNum"
                    placeholder="请输入拟定队伍数量"
                  />
                </a-form-model-item>
              </a-col>
              <a-col
                :md="24"
                :sm="24"
              >
                <a-form-model-item
                  label="招标内容"
                  :label-col="{ lg: { span: 3 }, sm: { span: 3 } }"
                  :wrapper-col="{ lg: { span: 21 }, sm: { span: 21 } }"
                  prop="biddingContent"
                >
                  <BaseTextarea
                    v-model="queryParam.biddingContent"
                    :max-length="1000"
                    placeholder="请输入招标内容"
                  />
                </a-form-model-item>
              </a-col>
              <a-col
                v-if="queryParam.biddingStatusCode == 1 || !this.$route.query.id"
                :md="24"
                :sm="24"
              >
                <a-form-model-item
                  label="情况说明"
                  :label-col="{ lg: { span: 3 }, sm: { span: 3 } }"
                  :wrapper-col="{ lg: { span: 21 }, sm: { span: 21 } }"
                  prop="information"
                >
                  <BaseTextarea
                    v-model="queryParam.information"
                    :max-length="1000"
                    placeholder="请输入"
                  />
                </a-form-model-item>
              </a-col>
              <a-col
                :md="8"
                :sm="8"
              >
                <a-form-model-item label="附件">
                  <b-upload
                    :maxUploadCount="1"
                    :multiple="false"
                    upload-type="single"
                    business-code="LCM16"
                    :file-list.sync="planFileInfoVo"
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
          </div>
        </div>
      </a-form-model>
      <div
        class="operation mb12"
        style="text-align: right"
      >
        <a-button
          :loading="loading"
          type="primary"
          class="btn_right"
          @click="submit"
        >
          提交
        </a-button>
        <a-button
          :loading="loading"
          type="primary"
          class="btn_right"
          @click="submitQuery('DRAFT')"
        >
          保存
        </a-button>
        <a-button
          v-checkVisibleInDetail
          @click="$close()"
        >
          关闭
        </a-button>
      </div>
    </div>
  </base-breadcrumb>
</template>
<script>
import TitleName from '@/components/TitleName/index.vue'
import { addBranchBiddingManage, editBranchBiddingManage, getBranchBiddingManageDetails, getDropDown } from '@/api/legal'
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import SelectProject from '@/components/Select/SelectProject'

export default {
  components: {
    SelectSubCompany,
    SelectProject,
    TitleName
  },
  name: 'a' + Date.now(),
  data() {
    return {
      detailsData: {},
      queryParam: { planFileInfoVo: {} },
      planFileInfoVo: [],
      loading: false,
      rules: {
        amount: [{ required: true, message: '请输入招标合同额（万元）', trigger: 'change' }],
        subcontractorsSelectId: [{ required: true, message: '请选择', trigger: 'change' }],
        branchPackModeId: [{ required: true, message: '请选择分包方式', trigger: 'change' }],
        planBiddingTime: [{ required: true, message: '请选择计划招议标时间', trigger: 'change' }],
        planTime: [{ required: true, message: '请选择计划开工时间', trigger: 'change' }],
        planEndTime: [{ required: true, message: '请选择计划完工时间', trigger: 'change' }],
        planContractTime: [{ required: true, message: '请选择计划合同签订时间', trigger: 'change' }],
        ranksNum: [
          { required: true, message: '请输入拟定队伍数量', trigger: 'change' },
          { validator: this.isNum, trigger: 'blur' }
        ],
        biddingContent: [{ required: true, message: '请输入招标内容', trigger: 'change' }],
        branchCompanyId: [{ required: true, message: '请选择分公司', trigger: 'change' }],
        projectId: [{ required: true, message: '请选择项目', trigger: 'change' }],
        information: [{ required: true, message: '请输入情况说明', trigger: 'change' }]
      },

      subcontractMethods: [],
      subcontractorSelectionMethods: [],
      state: Number(this.$route.query.state)
    }
  },
  created() {
    if (this.state !== 1) {
      this.$route.meta.title = '招议标计划' + (this.state === 2 ? '编辑' : '详情')
      this.loading = true
      getBranchBiddingManageDetails({ id: this.$route.query.id })
        .then((res) => {
          this.loading = false
          this.detailsData = res.data
          this.queryParam = res.data
          this.planFileInfoVo = [this.queryParam.planFileInfoVo]
        })
        .catch((res) => {
          this.loading = false
        })
    } else {
      this.$route.meta.title = '新增招议标计划'
    }
    this.getDropDownList_one()
    this.getDropDownList_two()
  },
  props: {
    isAudit: {
      // 是否作为审批详情
      type: Boolean,
      default: false
    }
  },
  watch: {
    isAudit: {
      immediate: true,
      handler(val) {
        if (val) {
          this.state = 3
        }
      }
    }
  },
  methods: {
    getDeclareDate(stamp, time, type) {
      switch (type) {
        case '计划招议标时间':
          this.queryParam.planBiddingTime = time
          break
        case '计划合同签订时间':
          this.queryParam.planContractTime = time
          break
        case '计划开工时间':
          this.queryParam.planTime = time
          break
        case '计划完工时间':
          this.queryParam.planEndTime = time
          break
      }
    },
    async submit() {
      if (!(await this.submitQuery('DRAFT'))) {
        return
      }
      await this.submitQuery('SUBMITTED')
    },
    async submitQuery(status) {
      return new Promise((resolve) => {
        const form = this.$refs.form
        form.validate(async (valid) => {
          if (!valid || !this.queryParam.planBiddingTime || !this.queryParam.planContractTime || !this.queryParam.planTime || !this.queryParam.planEndTime) {
            this.$message.info('信息不完整')
            resolve(false)
          } else {
            this.loading = true
            this.queryParam.auditStatusEnum = status
            this.queryParam.planFileInfoVo = this.planFileInfoVo[0] || []
            if (!this.queryParam.id) {
              let res = await addBranchBiddingManage(this.queryParam)
              this.loading = false
              if (res.code === 200) {
                if (status == 'DRAFT') {
                } else {
                }
                this.$message.success(status == 'DRAFT' ? '保存成功' : '提交成功')
                this.queryParam.id = res.data.id
                resolve(true)
              } else {
                this.$message.error('提交失败')
              }
            } else {
              let res = await editBranchBiddingManage(this.queryParam)
              this.loading = false
              if (res.code === 200) {
                this.$message.success(status == 'DRAFT' ? '保存成功' : '提交成功')
                resolve(true)
              } else {
                this.$message.success('提交失败')
              }
            }
            if (status === 'SUBMITTED') {
              this.$close()
            }
          }
        })
      })
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    isNum(rule, value, callback) {
      const age = /^[0-9]*$/
      if (!age.test(value)) {
        callback(new Error('只能输入整数'))
      } else {
        callback()
      }
    },
    getDropDownList_one() {
      const query = {
        type: 0
      }
      getDropDown({ query: query }).then((res) => {
        this.subcontractMethods = res.data
      })
    },
    getDropDownList_two() {
      const query = {
        type: 1
      }
      getDropDown({ query: query }).then((res) => {
        this.subcontractorSelectionMethods = res.data
      })
    }
  }
}
</script>

<style scoped lang="less">
.box {
  width: 100%;
  height: 100%;
  background: white;
  padding: 30px;
  margin-bottom: 20px;
  // box-shadow: 10px 10px 5px #ccc;
  box-sizing: border-box;

  .title {
    margin-bottom: 20px;

    .minusicon {
      display: inline-block;

      .icon {
        transform: rotate(90deg);
        font-size: 20px;
        color: #048fe0;
      }
    }

    span {
      display: inline-block;
      font-size: 20px;
    }
  }

  .descriptions {
    padding: 20px;
    box-sizing: border-box;
  }
}
</style>
